<template>
  <!-- <div id="app">
    <HelloWorld :listData="data" :itemSize="100"/>
  </div> -->
  <VirtualList :listData="data" :estimatedItemSize="100" v-slot="slotProps">
    <myItem :item="slotProps.item"/>
  </VirtualList>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue';
import VirtualList from "./components/VirtualList.vue";
import myItem from "./components/myItem.vue";
import { faker } from '@faker-js/faker';
let d = [];
for (let i = 0; i <10000;i++){
  d.push({id: i,value:faker.lorem.sentences()});
  // d.push({id: i,value:i});
}

export default {
  name: 'App',
  components: {
    // HelloWorld
    VirtualList,
    myItem
  },
  data(){
    return {
      data: d
    }
  }
}
</script>

<style>
html, body{
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>
